<template>
  <div class="bg-grey pb-60 ">
    <!--面包屑开始-->
    <div class="archive-header pt-20 wow fadeInUp animated">
      <div class="container">
          <h2 class="font-weight-900">文章</h2>
          <div class="breadcrumb">
              <a href="index.html" rel="nofollow">文章</a>
              <span rel="nofollow"></span> 标签
          </div>
          <div class="bt-1 border-color-1 mt-30 mb-50"></div>
      </div>
    </div>
    <!--面包屑结束-->
    <div class="container ">
      <div class="col-md-12  wow fadeInUp animated">
        <el-card class="col-md-12 hover-up transition-normal">
          <div class="text-center mb-20" ><h5 class="font-weight-bold">分类标签🎖️</h5></div>
          <div class="row justify-content-center"  >
            <div class="col-md-2" v-for="(item,index) in tags" :key="item.id" @click.prevent="toTagDetails(item.id,item.tagName)">  
              <el-card
              class="hover-up transition-normal d-flex align-items-center justify-content-center mt-10 mb-10"
            >
            <el-badge :value="item.articleCount" class="item"  >
               <el-tag class="text-center" type="success" @click="toTagDetails(item.id,item.tagName)">{{item.tagName}}</el-tag>
            </el-badge>
            </el-card>
            </div>        
          </div>
        </el-card>
      </div>
    </div>
  </div>

</template>

<script>
import tagDetail from './tagDetails/index.vue';
export default {
  name:'tag',
  components:{
    tagDetail,
  },
  data() {
    return {
      tags:[],
    }
  },
  mounted(){
    this.getArticleTags();
  },
  methods:{
    async getArticleTags(){
      const res = await this.$API.tag.getTagList();
      if(res.code == 200){
        this.tags = res.data;
      }
      else
      {
        this.$message({
          type:'error',
          message:'获取标签列表失败！'
        })
      }
    },
    toTagDetails(tagId,tagName){
      this.$router.push({ name: 'tagDetails', params: { tagId: tagId,tagName: tagName} });
    }
  }
};
</script>

<style>
div {
    cursor: pointer;
}
</style>